<template>
	<view class="wrap">
		<u-navbar z-index="20" :bgColor="background" :titleStyle="{fontWeight:500,color:'#383838'}" title="跟进记录"
			:placeholder="true" autoBack></u-navbar>
		<view class="top_img">
			<image :src="imgSrc+'u1.png'" mode="aspectFill"></image>
		</view>
		<view class="header" v-if="companyInfo.pid">
			<view class="body_name flex_sb">
				<text class="company_name">{{companyInfo.company||''}}</text>
				<view class="head_right flex_c "
					:class="companyInfo.state==4?'success':companyInfo.state==3?'err':companyInfo.state==1?'ing':'wait'">
					<view class="icon_box">
						<image :src="imgSrc+'t_success.png'" mode="aspectFill" v-if="companyInfo.state==4"></image>
						<image :src="imgSrc+'t_err.png'" mode="aspectFill" v-else-if="companyInfo.state==3">
						</image>
						<image :src="imgSrc+'t_ing.png'" mode="aspectFill" v-else-if="companyInfo.state==1">
						</image>
						<image :src="imgSrc+'t_wait.png'" mode="aspectFill" v-else></image>
					</view>
					<text>{{companyInfo.state_name||''}}</text>
				</view>

			</view>
			<view class="body_info">
				<view class="info_item1 flex_sb">
					<view class="info_left flex_s">
						<text class="name">{{companyInfo.contacts||''}}</text>
						<text class="phone">{{companyInfo.phone||''}}</text>
					</view>
					<view class="info_right flex_s"
						@click="$u.route(`/pages/detail/information?pid=${companyInfo.pid}&edit=true`)">
						<text>详细资料</text>
						<u-icon name="arrow-right" size="12" color="#808080"></u-icon>
					</view>
				</view>
				<view class="info_item flex_sb" v-if="perm!='user'">
					<view class="info_left flex_sb">
						<text class="name">介绍人：{{companyInfo.referee||''}}</text>
						<text class="phone">联系方式：{{companyInfo.referee_phone}}</text>
					</view>

				</view>

			</view>
		</view>
		<view class="card_box">
			<view class="title">
				跟进记录 {{dynamicInfo.length||0}}
			</view>
			<view class="card_body">
				<view class="follow_list" v-if="dynamicInfo.length">
					<view class="follow_item flex_ss" v-for="(item,index) in dynamicInfo" :key="index">
						<view class="left_line flex_fa">
							<view class="icon_circle flex_c"
								:class="item.state==4?'success':item.state==3?'err':item.state==1?'ing':'wait'">
								●
							</view>
							<view class="line"></view>
						</view>
						<view class="right_info">
							<view class="status_box flex_s"
								:class="item.state==4?'success':item.state==3?'err':item.state==1?'ing':'wait'">
								<view class="icon_box">
									<image :src="imgSrc+'t_success.png'" mode="aspectFill" v-if="item.state==4"></image>
									<image :src="imgSrc+'t_err.png'" mode="aspectFill" v-else-if="item.state==3">
									</image>
									<image :src="imgSrc+'t_ing.png'" mode="aspectFill" v-else-if="item.state==1">
									</image>
									<image :src="imgSrc+'t_wait.png'" mode="aspectFill" v-else></image>
								</view>
								<text>{{item.tage_name||''}}</text>
							</view>
							<view class="time_box">
								{{item.creation_time||''}}
							</view>
							<view class="content">
								{{item.content_update||''}}
							</view>
							<view class="sub_content" v-if="item.signing_msg">
								{{item.signing_msg}}
							</view>
							<view class="sub_content flex_sb" v-if="Number(item.contract_number)">
								<text>订单编号：{{item.contract_number||''}}</text>
								<text @click="copy(item.contract_number)"
									style="margin-left: 10rpx;color: #00449b;">复制</text>
							</view>
							<!-- <view class="sub_content flex_sb" v-if="Number(item.contract_number)">
								<text>合作名称：{{item.contract_number||''}}</text>
							</view> -->
							<view class="sub_content flex_sb" v-if="Number(item.project_amount)">
								<text>合作款：{{item.project_amount||''}}</text>
								<text>介绍人佣金：{{item.commission||''}}</text>
							</view>

							<view class="sub_content flex_sb" v-if="item.commission_mark">
								<text>备注：{{item.commission_mark||''}}</text>
							</view>
							<view class="masker_box">
								<view class="change_box" v-if="item.sales_change">
									{{item.sales_change||''}}
								</view>

								<view class="follow_box flex_s">
									<view class="text1">
										操作人：{{item.sales_name||''}}
									</view>
									<view class="text2">
										联系方式：{{item.sales_phone||''}}
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
				<emptyPage text="暂无跟进记录" :top="60" v-else>
				</emptyPage>

			</view>
		</view>
		<!-- 		<view class="footer flex_c" v-if="permData.perm!='user'&&is_submit">
			<view class="btn" @click="$u.route(`/pages/detail/addStatus?pid=${companyInfo.pid}`)">
				新增记录
			</view>
		</view> -->
		<view class="footer flex_c" v-if="permData.perm!='user'&&is_submit">
			<view class="phone_box">
				<view class="phone_item flex_fc" @click="makePhone(companyInfo.phone)">
					<view class="img_box">
						<image src="@/static/img/phone_g.png" mode="aspectFill"></image>
					</view>
					<view class="text_box">致电客户</view>
				</view>
				<view class="phone_item flex_fc" @click="makePhone(companyInfo.sale_phone)">
					<view class="img_box">
						<image src="@/static/img/phone_b.png" mode="aspectFill"></image>
					</view>
					<view class="text_box">致电销售</view>
				</view>
			</view>
			<view class="btn" @click="$u.route(`/pages/detail/addStatus?pid=${companyInfo.pid}&channel=${companyInfo.channel}`)">
				新增记录
			</view>
		</view>

		<homeVue v-if="showHome"></homeVue>
	</view>
</template>

<script>
	import homeVue from "@/components/home/index.vue"
	import emptyPage from '@/components/emptyPage.vue'
	import {
		getfollow
	} from "@/api/project.js"
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			emptyPage,
			homeVue
		},
		computed: mapGetters(['permData']),
		data() {
			return {
				companyInfo: {},
				dynamicInfo: [],
				pid: '',
				is_submit: 0
			};
		},
		onLoad(option) {
			// 是否展示home键
			if (uni.getStorageSync('vpHistory')) {
				this.showHome = true
			}
			if (option.pid) {
				this.pid = option.pid
			}
		},
		onShow() {
			this.get_getfollow(this.pid)
		},
		methods: {
			makePhone(val) {
				uni.makePhoneCall({
					phoneNumber: val //仅为示例
				});
			},
			get_getfollow(id) {
				let params = {
					pid: id,
					is_user: this.permData.perm == 'user' ? 1 : 0
				}
				getfollow(params).then((res) => {
					const data = res.data
					this.companyInfo = data.company_info
					this.dynamicInfo = data.dynamic_info
					this.is_submit = data.is_submit
					console.log(this.dynamicInfo, "记录列表");
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding-bottom: 200rpx;

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 180rpx;
			background: #fff;
			padding: 0 40rpx 0 25rpx;

			.phone_box {
				margin-right: 50rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-column-gap: 50rpx;

				.phone_item {
					.img_box {
						width: 38rpx;
						height: 38rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.text_box {
						font-size: 24rpx;
						color: #454141;
					}
				}
			}

			.btn {
				width: 378rpx;
				height: 81rpx;
				line-height: 81rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				border-radius: 50rpx;
				color: #fff;
				background: #2F59F1;
			}
		}




		.top_img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 520rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.card_box {
			position: relative;
			width: 702rpx;
			margin: 0 auto;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 32rpx 0;

			.card_body {
				.follow_list {
					padding: 0 24rpx;

					.follow_item {
						.left_line {
							padding-top: 20rpx;
							/* 子元素撑满 */
							align-self: stretch;



							.icon_circle {
								width: 12rpx;
								height: 12rpx;
								border-radius: 50%;
								overflow: hidden;
							}

							.line {
								width: 0;
								height: 100%;
								border: 1px dashed #E3E3E3;
							}
						}

						.right_info {
							padding-bottom: 26rpx;
							margin-left: 30rpx;

							.time_box,
							.sub_content {
								font-size: 24rpx;
								color: #656565;
								line-height: 40rpx;
							}

							.content {
								line-height: 40rpx;
								color: #383838;
								font-size: 28rpx;
								font-weight: 500;
								margin: 5rpx 0;
							}

							.masker_box {
								font-size: 24rpx;

								width: 613rpx;
								margin: 12rpx auto 0;
								border-radius: 8rpx;
								background: #F4F5F6;
								padding: 14rpx 20rpx;

								.change_box {
									color: #2F59F1;
									margin-bottom: 10rpx;
								}

								.follow_box {
									color: #656565;

									.text1 {
										margin-right: 50rpx;
									}
								}

							}

							.status_box {
								font-size: 24rpx;
								width: fit-content;
								padding: 8rpx;
								border-radius: 8rpx;

								.icon_box {
									width: 34rpx;
									height: 34rpx;
									margin-right: 4rpx;

									image {
										width: 100%;
										height: 100%;
									}
								}

							}
						}
					}
				}
			}

			.title {
				padding: 0 24rpx;
				font-size: 32rpx;
				font-weight: 500;
				margin-bottom: 30rpx;
			}
		}

		.header {
			padding: 32rpx 24rpx;
			position: relative;
			margin: 32rpx auto;
			width: 702rpx;
			border-radius: 12rpx;
			background: #FFFFFF;

			.body_name {
				font-size: 28rpx;
				font-weight: 500;
				color: #00449B;
				margin-bottom: 12rpx;



				.head_right {
					padding: 8rpx;
					border-radius: 8rpx;
					background: #ECF6FF;
					font-size: 24rpx;
					color: #2A82E4;

					.icon_box {
						width: 34rpx;
						height: 34rpx;
						margin-right: 4rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.body_info {
				font-size: 24rpx;

				.info_item1 {
					margin-bottom: 10rpx;

					.info_left {
						font-weight: 500rpx;
						min-width: 366rpx;
						color: #383838;
					}
				}

				.info_left {
					min-width: 366rpx;
					color: #656565;

					.name {
						margin-right: 20rpx;
					}
				}

				.info_right {
					color: #808080;

					text {
						margin-right: 5rpx;
					}
				}


			}
		}
	}
</style>